<template>
  <div class="note-container">
    <!-- 搜索表单 -->
    <div class="search-section">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="笔记ID">
          <el-input
            v-model="searchForm.id"
            placeholder="请输入笔记ID"
            clearable
            size="small"
            @clear="handleSearch">
          </el-input>
        </el-form-item>
        
        <el-form-item label="用户ID">
          <el-input
            v-model="searchForm.memberId"
            placeholder="请输入用户ID"
            clearable
            size="small"
            @clear="handleSearch">
          </el-input>
        </el-form-item>
        
        <el-form-item label="笔记标题">
          <el-input
            v-model="searchForm.title"
            placeholder="请输入笔记标题"
            clearable
            size="small"
            @keyup.enter.native="handleSearch"
            @clear="handleSearch">
          </el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSearch" size="small">搜索</el-button>
          <el-button @click="resetSearch" size="small">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-section">
      <el-table :data="noteList" stripe>
        <el-table-column prop="id" label="笔记 ID"></el-table-column>
        <el-table-column prop="memberId" label="用户 ID"></el-table-column>
        <el-table-column prop="title" label="笔记标题"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button size="mini" @click="handleViewDetail(scope.row.id)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-wrapper">
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10]"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 笔记详情 -->
    <el-dialog
      title="笔记详情"
      :visible.sync="dialogVisible"
      width="60%"
      :close-on-click-modal="false">
      <div class="dialog-content">
        <h3 style="margin-top: 0">{{ noteDetail.title }}</h3>
        <el-divider></el-divider>
        <div class="detail-item">
          <span class="label">创建者昵称：</span>
          <span class="value">{{ noteDetail.nickname || "暂无" }}</span>
        </div>
        <div class="detail-item">
          <span class="label">创建时间：</span>
          <span class="value">{{ noteDetail.gmtCreate | formatDate }}</span>
        </div>
        <el-divider></el-divider>
        <div class="content-box">
          <h4>笔记内容：</h4>
          <div class="note-content" v-html="noteDetail.content"></div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import noteApi from "@/api/admin/note"

export default {
  data() {
    return {
      noteList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      noteDetail: {
        title: "",
        memberNickname: "",
        content: "",
        gmtCreate: "",
      },
      searchForm: {
        id: "",
        memberId: "",
        title: "",
      }
    }
  },
  mounted() {
    this.getNoteList()
  },
  filters: {
    formatDate(value) {
      if (!value) return ""
      return new Date(value).toLocaleString()
    },
  },
  methods: {
    // 搜索笔记
    handleSearch() {
      this.currentPage = 1
      this.getNoteList()
    },
    
    // 重置搜索
    resetSearch() {
      this.searchForm = {
        id: "",
        memberId: "",
        title: "",
      };
      this.handleSearch();
    },
    getNoteList() {
      // 过滤掉空值的搜索条件
      const searchParams = Object.fromEntries(
        Object.entries(this.searchForm).filter(([_, v]) => v !== "")
      );
      
      noteApi
        .searchNotes(
          this.currentPage, 
          this.pageSize, 
          searchParams
        )
        .then((response) => {
          this.noteList = response.data.items;
          this.total = response.data.total;
        })
        .catch((error) => {
          console.error(error);
          this.$message.error("搜索失败");
        });
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage
      this.getNoteList()
    },
    handleDelete(id) {
      this.$confirm("确定要删除该笔记吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          noteApi
            .deleteNote(id)
            .then((response) => {
              if (response.code === 200) {
                this.$message.success("删除成功")
                this.getNoteList()
              } else {
                this.$message.error(response.message)
              }
            })
            .catch((error) => {
              console.error(error)
            })
        })
        .catch(() => {
        })
    },
    handleViewDetail(id) {
      noteApi
        .getNoteById(id)
        .then((response) => {
          if (response.code === 200) {
            this.noteDetail = response.data.note
            this.dialogVisible = true // 显示弹窗
          } else {
            this.$message.error(response.message)
          }
        })
        .catch((error) => {
          console.error(error)
        });
    },
  },
};
</script>

<style scoped>
.search-section {
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.search-form .el-form-item {
  margin-right: 15px;
  margin-bottom: 10px;
}

.note-container {
  position: relative;
  min-height: 500px;
}

.table-section {
  margin-bottom: 20px;
}

.dialog-content {
  padding: 0 20px;
}

.detail-item {
  margin-bottom: 15px;
}

.label {
  font-weight: bold;
  color: #606266;
}

.value {
  color: #909399;
}

.content-box {
  margin-top: 20px;
}

.note-content {
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fafafa;
  min-height: 100px;
}

.pagination-wrapper {
  text-align: center;
}
</style>